<template>
  <view class="feedback">
    <view class="navbar">
      <u-navbar
          title="建议反馈"
          placeholder
          titleStyle="color:black"
          leftIconColor="#000"
          :background="navbarStyel">
      </u-navbar>
    </view>
    <view class="feedback_box" :style="{'height': windowHeight - navbarHeight - 10 + 'px'}">
      <scroll-view class="feedback_scroll"
                   refresher-default-style="none"
                   :scroll-y="true"
                   :scroll-with-animation="true"
                   :scroll-top="0">
        <!-- 加载中提示 -->
        <view class="lanjiazai_wrap" v-if="skeletonLoading">
          <view class="lanjiazai_item">
            <view class="loading_icon">
              <image :src="BestImgUrl + '/index/logo_loading.gif'" class="loading_gif"></image>
            </view>
            <view class="tag">加载中...</view>
          </view>
        </view>
        <view v-if="!skeletonLoading" >
          <view v-if="dataList.length != 0" >
            <view class="item_feed_back" v-for="(item, index) in dataList" :key="index" @click="toFeedbackActive(item)">
              <view  style="flex: 1">
                <view>
                  反馈时间：{{ item.create_time }}
                </view>
                <view style="margin-top: 10rpx;color: #333333">
                  反馈类型：{{ listType[item.type - 1] }}
                </view>
              </view>
              <view class="item_content" :class="item.status === 0 ? 'status3':item.status === 1 ? 'status2' : 'status1'">
                <text style="margin: auto">{{ item.status === 0 ? '待处理':item.status === 1 ? '处理中': '已处理'}}</text>
              </view>
            </view>
            <view class="chudijiazai">
              <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                          margin-bottom="10"/>
              <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()" style="text-align: center;">立即刷新</view>
            </view>
          </view>
          <!-- 暂无店铺提示 -->
          <view v-else-if="dataList.length == 0 && failTimeOutShow == false" class="noData_box shop_list_wrap_height">
            <image :src="BestImgUrl + '/index/noData.png'" mode="widthFix" style="width: 60%"></image>
            <view>暂无店铺</view>
          </view>
          <!-- 网络错误提示 -->
          <view v-else-if="failTimeOutShow == true && dataList.length == 0" class="noData_box shop_list_wrap_height">
            <image src="/static/images/Frame33412.png"></image>
            <view class="timeOut">
              <view>网络好像出问题了~</view>
              <view @click="refurbish()">立即刷新</view>
            </view>
          </view>
        </view>

      </scroll-view>
    </view>

  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      navbarStyel: {
        backgroundColor: '#FDE52F',
        color: '#000000'
      },
      // 屏幕高度
      windowHeight: 0,
      //导航栏高度
      navbarHeight: 0,
      listType: ['订单问题', '餐品问题', '商家问题', '程序BUG', '售后问题', '其他反馈'],
      dataList: [],
      pageSize: 1,
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
    }
  },
  onLoad() {
    // 获取屏幕高度
    this.windowHeight = uni.getWindowInfo().windowHeight
    // 头部导航栏高度
    uni.createSelectorQuery().select('.navbar').boundingClientRect(function (res) {
      this.navbarHeight = res.height
    }).exec()
    this.getFeedbackList()
  },
  //下拉刷新
  onPullDownRefresh() {
    let that = this
    console.log('已到顶部')
    that.skeletonLoading = true
    that.failTimeOutShow = false
    that.dataList = []
    that.pageSize = 1
    setTimeout(function () {
      that.getFeedbackList();
      uni.stopPullDownRefresh();
    }, 1500);
  },
  //触底加载
  onReachBottom() {
    let that = this
    that.loadText.nomore = '没有更多了'
    that.Bottomingrefresh = false
    that.failTimeOutShow = false
    this.loadingstatus = 'loading';
    setTimeout(function () {
      that.pageSize++;
      that.getFeedbackList();
      uni.hideNavigationBarLoading()
    }, 500);
  },
  methods: {
    // 用户反馈列表
    getFeedbackList() {
      let that = this
      that.$api.getFeedbackListAPI({
        page: that.pageSize,
        limit: 12
      }).then(res => {
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        if (that.pageSize != 1) {
          if (res.data.result.length != 0) {
            that.loadingstatus = 'loading';
            that.dataList = that.dataList.concat(res.data.result)
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.dataList = res.data.result
          that.loadingstatus = 'nomore'
        }
        console.log('套餐列表', that.dataList);
        that.skeletonLoading = false
      }).catch( err => {
        if (!err.data) {
          //不存在就是访问超时或者接口错误
          //console.log('请求错误或请求超时', err.errMsg)
          that.skeletonLoading = false
          if (that.loadingstatus == 'loading') {
            that.loadingstatus = 'nomore'
            that.loadText.nomore = '网络好像出问题了~'
            that.Bottomingrefresh = true
          } else {
            that.shopsLists = []
            that.loadingstatus = 'loading'
            that.loadText.nomore = '没有更多了'
            that.Bottomingrefresh = false
            that.failTimeOutShow = true
          }
        } else {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      })
    },
    // 用户反馈详情
    toFeedbackActive(item){
      uni.navigateTo({
        url: '/subpackageA/pages/feedback/feedback-active?id=' + item.id
      })
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #F6F6F6;
}
.feedback {
  width: 100%;
  height: 100%;
  .feedback_box {
    width: 100%;
    height: 100%;

    .feedback_scroll {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

.item_feed_back {
  background-color: #FFFFFF;
  padding: 20rpx;
  margin: 20rpx 20rpx 0;
  font-size: 26rpx;
  border-radius: 10rpx;
  color: #999999;
  display: flex;
  align-items: center;
}
.item_content{
  width: 110rpx;
  height: 56rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-items: center;
  font-size: 20rpx;
  font-weight: bold;
  color: #FFFFFF;
}
.status3{
  color: #ff8e8e;
  border: #ff8e8e solid 5rpx;
  border-radius: 100rpx;
}
.status2{
  color: #ffba3d;
  border: #ffba3d solid 5rpx;
  border-radius: 100rpx;
}
.status1{
  color: #63d41e;
  border: #63d41e solid 5rpx;
  border-radius: 100rpx;
}
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
      .loading_gif {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }

}
</style>
